
import { Card ,Form,Input,Checkbox,Button,message} from 'antd'
import './index.scss'
import { useNavigate } from 'react-router-dom'
import { useStore } from '@/store'

const Login = () => {
 
   // console.log('Success:', values);
   const navigate = useNavigate()
   const { loginStore } = useStore()
   const onFinish = async values => {
     const { mobile, code } = values
     try {
       await loginStore.login({ mobile, code })
       navigate('/')
     } catch (e) {
       message.error(e.response?.data?.message || '登录失败')
     }
   } ;
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src="https://azhengpersonalblog.top/react-ant-admin/static/media/bg.6f870c8d.svg" alct="" />
        <Form onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off" initialValues={{
        mobile: '13911111138',
        code: '246810',
        remember: true
      }}>
      <Form.Item   name="mobile" rules={[
          {
            required: true,
            message: '请输入手机号',
          },
        ]}>
        <Input size="large" placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item  name="code" rules={[
          {
            required: true,
            message: '请输入验证码!',
          },
        ]}>
        <Input size="large" placeholder="请输入验证码" />
      </Form.Item>
      <Form.Item  name="remember" valuePropName="checked">
        <Checkbox className="login-checkbox-label">
          我已阅读并同意「用户协议」和「隐私条款」
        </Checkbox>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" size="large" block>
          登录
        </Button>
      </Form.Item>
    </Form>
      </Card>
    </div>
  )
}

export default Login